<style lang="less" scoped>
.icon-add,
.icon-reduce {
  padding: 0;
}
.btn-grp {
  padding: 0;
}
img.Signed {
  //position: absolute;
  margin: 0.2rem 0.2rem 0;
  width: 104px;
  height: 57px;
  zoom: 0.6;
  top: 0;
  right: 0;
}
</style>

<template>
  <div class="contain">
    <!-- <app-head :show="showstate"
              :title="pagetitle"></app-head> -->
    <div class="m-sech-wrap displayflex">
      <div class="flex1">
        <div class="m-sech-box displayflex">
          <i class="iconfont ft16 icon-search"></i>
          <div class="flex1 m-sech-ipt">
            <input type="text"
                   placeholder="输入商品信息"
                   v-model="searchgoods"
                   @keyup.13="onSubmit()">
          </div>
        </div>
      </div>
      <div class="m-sech-btn"
           @click="onSubmit()">搜索</div>
    </div>
    <scroller lock-x
              scrollbar-y
              use-pullup
              :height="scrollerHeight"
              :pullup-config="ScrollerConfig"
              ref="Scroller">
      <!-- <div class="car-bbinfo-card mb30">
        <div class="bbno lineb">物流单号：{{data.ATVNo}}</div>
        <div class="bbmain">
          <p class="displayflex"><i>制单时间</i><label class="flex1">{{data.CreateTime | time}}</label></p>
          <p class="displayflex"><i>取货地址</i><label class="flex1">{{data.DepartureCity | city}}{{data.DepartureDistrict | district}}{{data.DepartureAddress}}</label>
          </p>
          <p class="displayflex"><i>联系人</i><label class="flex1">{{data.SendContacts}} {{data.SendContactsTel}}</label></p>
        </div>
      </div> -->

      <div class="car-bbinfo-list">
        <div class="bbtitle lineb">
          <i class="iconfont icon-cargo circle"></i>
          {{totaldetialcount}}种商品
        </div>
        <div class="mb10"
             v-for="item in data">
          <div class="bbitem displayflex">
            <img :src="item.PictContent | filterImgUrl">
            <div class="flex1 specs">
              <p class="ft17 mb10 name">{{item.GoodsName}}</p>
              <!-- <p>规格：{{item.GoodsSpec}}</p>
              <p>厂商：{{item.Producer}}</p> -->
              <p>数量：{{item.Pcks}}</p>
              <p>提货数量：{{item.MaxPKGS}}</p>
            </div>
            <img class="Signed"
                 src="~images/icon/tag_yjh.png"
                 v-if="item.checkd == true">
          </div>

          <div class="cf choiced-bot">
            <template v-if="item.checkd == false">
              <div class="f-l">交货数量：</div>
              <div class="num-selector displayflex f-l">
                <i class="iconfont icon-reduce"
                   @click="changeNum(item, -1)"></i>
                <input number
                       type="text"
                       class="flex1"
                       v-model="item.ConPKGS"
                       @input="iptBlur(item)">
                <i class="iconfont icon-add"
                   @click="changeNum(item, 1)"></i>
              </div>
              <div class="f-r btn"
                   @click="checkItem(item)">
                <i class="iconfont icon-cargo"></i>交货
              </div>
            </template>
            <template v-else>
              <div class="f-l">交货数量：{{item.ConPKGS}}</div>
            </template>
          </div>
        </div>
        <div class="loader-over">没有更多记录了</div>
      </div>

    </scroller>
    <div id="detailBottom"
         class="detail-bottom displayflex">
      <span>
        共计：
        <em class="red">{{TotalCounts}}</em> 个商品
      </span>
      <div class="flex1 btn-grp">
        <div @click="$router.go(-1)"
             class="btn gray">取消</div>
        <div @click="Next()"
             class="btn">确认交货</div>
      </div>
    </div>

  </div>
</template>

<script>
import footerMenu from "@/components/core/footer/manage.footer.vue";
import appHead from "@/components/core/header/app_headbar.vue";
import { mapGetters, mapState } from "vuex";
import { Search, Group, Cell, XButton } from 'vux'

export default {
  components: {
    footerMenu,
    appHead,
    Search,
    Group,
    Cell,
    XButton
  },
  data () {
    return {
      data: [],
      TotalCounts: 0,
      totaldetialcount: 0,
      ScrollerConfig: {
        content: "",
        downContent: "",
        height: 0,
        loadingContent: "",
        upContent: ""
      },
      results: [],
      searchgoods: '',
      searchData: [], sessionData: [],

    };
  },
  mounted () {
    this.$store.dispatch("cfg/setConHeight");
  },
  created () {
    this.getData();
  },
  computed: {
    ...mapState({
      pagetitle: state => state.cfg.appBarTitle,
      showstate: state => state.cfg.showAppBar,
    }),
    ...mapGetters({
      scrollerHeight: "cfg/getConHeight"
    }),
    userinfo () {
      return localStorage.userinfo ? JSON.parse(localStorage.userinfo) : null
    }
  },
  methods: {
    getData () {
      let query = {
        Guid: this.$route.query.Guid,
        SaleCorpGUID: this.$route.query.SaleCorpGUID,
        SaleCorpName: this.$route.query.SaleCorpName,
        ArrivalAddress: this.$route.query.ArrivalAddress
      };
      //this.data = resp.Data;
      this.Ajax.post("GetTrbbDetailGoods", query).then(resp => {
        if (resp.IsSuccess) {

          resp.Datas.forEach((g) => {
            g.ConPKGS = g.Qty;
            g.MaxPKGS = g.Qty;
            g.checkd = false;

          })
          this.data = resp.Datas
          this.totaldetialcount = resp.TotalRecords;
          this.searchData = this.data;
          this.amountNum();
        } else {
          this.Toast({
            message: "列表为空，请稍后刷新"
          });
        }
      });
    },

    Next () {

      var NextData = {
        CreateTime: this.searchData[0].CreateTime,
        ArrivalAddress: this.$route.query.ArrivalAddress,
        SaleCorpName: this.$route.query.SaleCorpName,
        Guid: this.$route.query.Guid,
        Tratvehicleex: this.searchData,
        SendContacts: this.$route.query.SendContacts,
        SendContactsTel: this.$route.query.SendContactsTel,
        ATVNo: this.$route.query.ATVNo,
      }
      sessionStorage.setItem('pickUpOrderData', JSON.stringify(NextData));
      this.$router.push({
        path: "carDeliveryDone",
        query: this.$route.query
      });
    },

    checkItem (item) {
      console.log(item);
      item.checkd = true;
    },

    //加减
    changeNum: function (item, way) {
      if (way > 0) {
        if (item.ConPKGS < item.MaxPKGS) {
          item.ConPKGS++;
        } else {
          this.Toast({ message: "交货件数不得大于提货件数" });
        }
      } else if (way < 0 && item.ConPKGS > 0) {
        item.ConPKGS--;
      } else {
        this.Toast({
          message: "请输入大于0的数"
        });
      }
      this.amountNum();
    },

    //数量输入框
    iptBlur (item) {
      if (item.ConPKGS === "") {
        item.ConPKGS = 0;
      }
      if (item.ConPKGS > item.MaxPKGS) {
        item.ConPKGS = item.MaxPKGS;
        this.Toast({ message: "交货件数不得大于提货件数" });
      }
      item.ConPKGS = parseInt(item.ConPKGS);
      this.amountNum();
    },

    amountNum () {
      this.TotalCounts = 0;
      this.data.forEach(x => {
        let qty = x.ConPKGS || 0;
        this.TotalCounts += qty;
      });
    },

    onSubmit () {
      var self = this;
      if (!self.searchgoods && !self.searchData.length) {
        self.totaldetialcount = 0;
        self.data = [];
        return;
      } else {
        //self.searchData=[];
        //self.data = this.searchData;
        //self.data.Tratvehicleex = [];
        console.log(self.searchData);
        self.data = self.searchData.filter(item => { return item.GoodsName.indexOf(this.searchgoods.trim()) >= 0 });
        console.log(self.searchData);
      }
      self.totaldetialcount = self.data.length;
      self.amountNum();
      // }
    },
    OnCancel () {
      console.log(this.data);
      // var data = this.searchData
      // data.concat(data);
      // this.data = data;
      //console.log(this.searchData.Tratvehicleex);
      //this.getData();
      //this.datas = this.searchData;
      this.data = this.searchData;
      //this.$set(this.data, this.searchData)
    },
  }
};
</script>
